<template>
    <view class="page">
        <template v-if="orderList.length > 0">
            <view class="_wrap">
                <view style="height: 100%;overflow-y: auto;">
                    <swiper class="swiper" @change="onChange">
                        <template v-for="order in orderList" :key="order.id">
                            <swiper-item>
                                <view class="box">
                                    <view class="show">
                                        <view class="circle">
                                            <view class="animation"></view>
                                            <LocalImage class="car" mode="widthFix" src="car.png" />
                                        </view>
                                        <view class="currentv">当前功率：
                                            <template v-if="fromPage == 'charge'">
                                                {{ order.device.port ? order.device.port[2] : '--'}}W
                                            </template>
                                            <template v-else>
                                                <template v-if="loadingParams">
                                                    <Loading />
                                                </template>
                                                <template v-else>
                                                    {{ order.params ? order.params[2] : '--' }}W
                                                </template>
                                            </template>
                                        </view>
                                    </view>
                                    <view class="info">
                                        <view class="row" v-if="!isPrivate"><text class="label">订单号：</text>{{ order.orderNo }}</view>
                                        <view class="row"><text class="label">设备：</text>{{ order.deviceId }} <text class="color-primary">{{ CHARGE_TYPE[order.device.chargeType] }}</text></view>
                                        <view class="row"><text class="label">枪口：</text>{{ PORT_NAME[order.port] }}</view>
                                        <template v-if="order.feeType == 0">
                                            <view class="row"><text class="label">预充时间：</text>{{ order.precharge }}小时</view>
                                            <template v-if="fromPage != 'charge'">
                                                <view class="row"><text class="label">剩余时间：</text>
                                                    <template v-if="loadingParams">
                                                        <Loading />
                                                    </template>
                                                    <template v-else>
                                                        {{ order.params ? formatChargeTime(order.params[0]) : '--' }}
                                                    </template>
                                                </view>
                                            </template>
                                        </template>
                                        <template v-else-if="order.feeType == 1">
                                            <view class="row"><text class="label">预充电量：</text>{{ order.precharge }}kwh</view>
                                            <template v-if="fromPage != 'charge'">
                                                <view class="row"><text class="label">剩余电量：</text>
                                                    <template v-if="loadingParams">
                                                        <Loading />
                                                    </template>
                                                    <template v-else>{{ order.params ? order.params[1] : '--' }}kwh</template>
                                                </view>
                                            </template>
                                        </template>

                                    </view>
                                </view>
                            </swiper-item>
                        </template>
                    </swiper>
                    </view>
            </view>
            <view class="bottom-action">
                <nut-button type="success" @tap="stopCharge">停止充电</nut-button>
            </view>
        </template>
        <template v-else>
            <view class="absolute xy f-36">无充电中订单</view>
        </template>
    </view>


    <LoadingPage v-if="!inited"  />
</template>

<script lang="ts" setup>
    import { Loading } from '@nutui/icons-vue-taro';
    import { stopChargeApi, stopChargeResApi } from '@/api/Charge'
    import { ref } from 'vue';
    import { hideLoading, showLoading, showModal, redirectTo, useRouter } from '@/utils/framework';
    import {chargingApi as privateChargingApi, stopChargeApi as stopPrivateChargeApi, stopChargeResApi as stopPrivateChargeResApi } from '@/api/PrivateChargeRecord'
    import { chargingApi } from '@/api/ChargeOrder';
    import { CHARGE_TYPE, PORT_NAME } from '@/constant';
    import LocalImage from '@/components/LocalImage/index.vue'
    import LoadingPage from '@/components/LoadingPage/index.vue'
    import { queryDeviceChargingInfo } from '@/api/Device';
    import { formatChargeTime } from '@/utils';
    

    const router = useRouter()
    const fromPage = router.params.from
    const isPrivate = router.params.private == '1'
    

    const inited = ref(false)
    const loadingParams = ref(true)

    let currentIndex = ref(0)
     

    const orderList = ref<any[]>([])
        
    


    function onChange(e) {
        currentIndex.value = e.detail.current
    }


    let queryCount = 0
    function stopCharge() {
        showModal({
            content : '确定停止充电吗',
            async success({ confirm }) {
                if(!confirm) return
                const id = orderList.value[currentIndex.value].id
                showLoading()
                const res = isPrivate ? (await stopPrivateChargeApi(id)) : (await stopChargeApi(id))
                if(res.success) {
                    setTimeout(() => {
                        queryRes(id)
                    }, 5000)
                    
                }else {
                    hideLoading()
                    showModal(res.msg)
                }
            }
        })
    }


    async function queryRes(id:number) {
        const res = isPrivate ? (await stopPrivateChargeResApi(id)) : (await stopChargeResApi(id))
        if(!res.success) {
            hideLoading()
            showModal('停止失败')
        }else if(res.data == 0) { //继续查询
            if(queryCount < 3) {
                setTimeout(() => {
                    queryRes(id)
                }, 5000)
            }else {
                hideLoading()
                showModal('停止失败')
            }
        }else if(res.data == 1) { //停止了
            hideLoading()
            //跳到详情页面
            let url = '../detail/index?id=' + id
            if(isPrivate) {
                url += '&private=1'
            }

            redirectTo(url)
            orderList.value.splice(currentIndex.value, 1)
            currentIndex.value = 0
        }else { //失败了
            hideLoading()
            showModal('停止失败')
        }
        
        queryCount ++
    }


    
    async function queryCharging() {
        const init = fromPage == 'charge' ? 0 : 1
        let res:any;
        if(isPrivate) {
            res = await privateChargingApi(Number(router.params.device), init)
        }else {
            res = await chargingApi(init)
        }

        if(res.data && res.data.length > 0) {
            res.data.forEach(row => {
                row.params = null
            })
            orderList.value = res.data


            if(fromPage != 'charge') { //不是来自充电的
                const params:any[] = []
                res.data.forEach(v => {
                    params.push({id : v.deviceId, port : v.port})
                })
                setTimeout(() => {
                    queryDeviceChargingInfo(params).then(r => {
                        if(r.data && r.data.length > 0) {
                            r.data.forEach((row, i) => {
                                if(!row) return

                                orderList.value[i].params = row.split('|')
                            })

                            loadingParams.value = false
                        }
                    })
                }, 3000)
            }
        }

        if(!inited.value) {
            inited.value = true
        }
        
    }

    queryCharging()

</script>

<style lang="scss" src="./index.scss" module></style>